<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8"><!-- 编码格式 -->
	<meta name="keywords" content="hnc" /><!-- 关键字 -->
	<meta name="description" content="This is the most handsome man" /><!-- 网站详细介绍 -->
	<meta http-equiv="refresh" content="9999999;url=www.baidu.com" /><!-- 页面重定向和刷新 -->
	<meta name="author" content="hnc" /><!-- 网页的作者 -->
	<title>渐变色模板</title>
	<style type="text/css">
    .dv_tay{width:100%;height:100%;display:inline-block;}
    .dv_jb{width:200px;height:200px;margin:10px;text-align: center;display:inline-block;}
    .dv_cs{width:200px;height:60px;margin:10px;text-align: center;display:inline-block;}
	
	
    #dv_a{background-image:linear-gradient(to top,red, blue); }
    #dv_b{background-image:linear-gradient(to right, red , blue);}
    #dv_c{background-image:linear-gradient(red , blue);}
    #dv_d{background-image:linear-gradient(to left, red , blue);}
    #dv_e{background-image:linear-gradient(to top left, red , blue);}
    #dv_f{background-image:linear-gradient(to top right, red , blue);}
    #dv_g{background-image:linear-gradient(to bottom left, red , blue);}
    #dv_i{background-image:linear-gradient(to bottom right, red , blue);}
	
    #dv_j{background-image:linear-gradient(90deg, red , blue);}
    #dv_k{background-image:linear-gradient(180deg, red, blue);}
    #dv_l{background-image:linear-gradient(to right,red, green, blue  );}
    #dv_m{background-image:linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);}
    #dv_n{background-image:linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,100,1));}
    #dv_o{background-image:repeating-linear-gradient(to right,red, yellow 10%, green 20%,blue 30%)}
    #dv_p{background-image:radial-gradient(red 0%, green 50%, blue 100%);}
    #dv_q{background-image:radial-gradient(red 5%, green 15%, blue 60%);}
    #dv_r{background-image:radial-gradient(circle, red, yellow, green);}
    #dv_s{background-image:repeating-radial-gradient(red, yellow 10%, green 15%)}
    #dv_t{background-image:radial-gradient(red, green, blue);border-radius:50%;}
    #dv_u{background-image:radial-gradient( green 20% ,green 60%, blue 20%);border-radius:30px;}
    .dv_btn{width:200px;height:60px;background-image-color:#46a3f7;border-radius:30px;position:relative;}
    .dv_padd{position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;}
    .dv_pad{width:180px;height:40px;background-image-color:#0066ff;border-radius:20px;display:inline-block;}
  </style>
</head>
<body>
    <p style="text-align:center;font-weight:600;">线性渐变</p>
    <div class="dv_tay">
        <div id="dv_a" class="dv_jb">从下到上</div>
        <div id="dv_b" class="dv_jb">从左到右</div>
        <div id="dv_c" class="dv_jb">从上到下（默认）</div>
        <div id="dv_d" class="dv_jb">从右到左</div>
        <div id="dv_e" class="dv_jb">右下到左上</div>
        <div id="dv_f" class="dv_jb">左下到右上</div>
        <div id="dv_g" class="dv_jb">右上到左下</div>
        <div id="dv_i" class="dv_jb">左上到右下</div>
        <div id="dv_j" class="dv_jb">指定角度</div>
        <div id="dv_k" class="dv_jb">指定角度</div>
        <div id="dv_l" class="dv_jb">多个颜色结点</div>
        <div id="dv_m" class="dv_jb">彩虹颜色</div>
        <div id="dv_n" class="dv_jb">使用透明度</div>
        <div id="dv_o" class="dv_jb">重复</div>
        <div id="dv_p" class="dv_jb">径向渐变 - 颜色结点均匀分布（默认）</div>
        <div id="dv_q" class="dv_jb">径向渐变 - 颜色结点不均匀分布</div>
        <div id="dv_r" class="dv_jb">设置形状：circle 表示圆形，ellipse 表示椭圆形。默认 ellipse</div>
        <div id="dv_s" class="dv_jb">重复的径向渐变</div>
    </div>
    <div class="dv_tay">
        <div id="dv_t" class="dv_jb"></div>
        <div id="dv_u" class="dv_cs"></div>
    </div>
    <div class="dv_tay">
        <div class="dv_btn">
            <div class="dv_pad dv_padd"></div>
        </div>
    </div>
 </body>
</html>